<style>
.el-pagination {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    background-color: #ebeef5;
}
</style>
<div id="root">

    <el-button @click="testFn">点击弹出框</el-button>

    <el-card class="box-card">

        <div slot="header" class="clearfix">
          <span>用户列表</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>

        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
      </el-card>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
const vm = new Vue({
    el: "#root",
    data: {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小乐',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小灰',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    },
    methods: {
        testFn() {
            this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
          });
        }
    }
})
</script>